<template>
	<view class="page">
		<view class="auth">
			<view class="wanl-title">欢迎登陆账号</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input type="text" placeholder="请输入用户名" confirm-type="next" maxlength="16"
						placeholder-class="placeholder" name="account" :value="account"></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input type="text" placeholder="请输入登录密码" password="true" confirm-type="done" maxlength="16"
						placeholder-class="placeholder" name="password" @input="onKeyInput"></input>
				</view>
				<view class="text-right" @tap="retrieve">
					忘记密码
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" form-type="submit" :disabled="submitDisabled">登
						录</button>
				</view>
				<!-- #ifdef MP-WEIXIN -->
					<view class="text-center">
						<button class="bottom" @click="authLogin">
							<image class="" src="https://zm.zonmay.com/public/static/wx.jpg" mode="aspectFit">
							</image>
							微信授权登录
						</button>
					</view>
				<!-- #endif -->
				
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="register">注册</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
		<!-- //授权弹框 -->
		<view class="auth_wrap" :class="isAuth?'show':''">
			<view class="mask"></view>
			<view class="auth_content">
				<view class="auth_top">
					<view class="ptitle">获取您的昵称、头像、手机号</view>
					<view class="txt">获取用户头像、昵称、手机号信息，主要用于完善个人资料，向用户提供更好使用体验</view>
					<view class="close" @tap="closePopup">
						<image src="@/static/close_x.png" mode=""></image>
					</view>
				</view>
				<view class="auth_ul">
					<view class="auth_li">
						<view class="tit">头像</view>
						<view class="rit">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
					</view>
					<view class="auth_li">
						<view class="tit">昵称</view>
						<view class="rit">
							<input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="onNickname" />
						</view>
					</view>
				</view>
				<view class="confirm_btn" @tap.stop="WxgetUserProfile">保存</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		pathToBase64
	} from '@/common/image.js' //引入图片转base64js
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				isAuth: false, //控制授权弹框显示与隐藏
				avatarUrl: '/static/logo.png', //头像
				nickname: '', //昵称
				isFrist: '', //判断是否是第一次授权
				submitDisabled: true,
				account: '',
				pageroute: '',
			};
		},
		onLoad(option) {
			// 用户名
			this.account = option.name;
			this.pageroute = option.url;
			//用于判断是否是首次授权，有值说明不是首次授权，没有值说明是首次授权
			let AlertLogin = uni.getStorageSync('AlertLogin');
			if (AlertLogin) {
				console.log('登录过一次')
				this.isFrist = 2
			} else {
				console.log('首次登录');
				this.isFrist = 1
			}
		},
		methods: {
			authLogin() {
				//首次授权，出现授权弹框，以后退出后再登录则直接登录上去，不再出现授权弹框
				if (this.isFrist == 1) {
					this.isAuth = true;
				} else {
					this.isAuth = false;
					this.wxGetUserProfile();
				}
			},
			//关闭授权弹框
			closePopup() {
				this.isAuth = false;
			},
			//监听昵称变化
			onNickname(e) {
				this.nickname = e.detail.value;
			},
			//获取头像变化的值
			onChooseAvatar(e) {
				let _this = this;
				//将微信返的临时图片转为base64格式图
				pathToBase64(e.detail.avatarUrl).then(base64 => {
					console.log(base64)
					this.avatarUrl = base64;
				}).catch(error => {
					console.error(error)
				})
			},
			//微信登录接口
			WxgetUserProfile() {
				let _this = this;
				if (this.isFrist == 1) {
					// 授权授权时提示输入昵称
					if (!this.nickname) {
						uni.showToast({
							title:'请输入昵称'
						})
						// this.$message.info('请输入昵称');
						return
					}
				}
				uni.showLoading({
					title: '登录中...'
				});
				let code = '';
				wx.login({
					success: res => {
						console.log(res, 'resccccc')
						code = res.code;
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: infoRes => {
						//请求后台授权登录接口
						//自己的代码逻辑
						_this.toLogin(code, infoRes);
					},
					fail: err => {
						uni.hideLoading();
					}
				})
			},
			//微信小程序登录
			wechatLogin() {
				let _this = this;
				// this.$loading();
				uni.login({
					success: loginRes => {
						if (loginRes.code) {
							uni.getUserInfo({
								withCredentials: true,
								success: info => {
									_this.toLogin(loginRes.code, info);
								},
								fail: res => {
									if (res.errMsg == 'getUserInfo:cancel' || res.errMsg ==
										'getUserInfo:fail auth deny') {
										this.$refs.uToast.show({
											title: '请删除此小程序重新授权',
											type: 'error'
										});
									}
								}
							});
						}
					}
				});
			},
			async toLogin(code, info) {
				// console.log(info)
				await uni.request({
					url: '/api/Login/wechatLogin',
					method: 'POST',
					data: {
						code: code,
						encrypted_data: info.encryptedData,
						iv: info.iv,
						raw_data: info.rawData,
						signature: info.signature,
						avatarUrl:this.avatarUrl,
						nickname:this.nickname
					},
					success: res => {
						console.log(res)
						console.log(res.data)
						this.$store.dispatch('user/login', res.data);
						// this.$store.dispatch('cart/login');
						// this.$store.dispatch('chat/get');
						uni.setStorage('AlertLogin',true);
						uni.navigateBack({
							delta: 1
						});
						// uni.reLaunch({
						// 	url: decodeURIComponent(this.pageroute)
						// });
					}
				});
			},
			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: 'account',
						checkType: 'notnull',
						errorMsg: '请输入用户名'
					},
					{
						name: 'password',
						checkType: 'string',
						checkRule: '6,16',
						errorMsg: '密码至少6位'
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.request({
						url: '/api/Login/xcx_login',
						method: 'POST',
						data: {
							mobile: formData.account,
							password: formData.password,
							client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
								"wanlshop:chat_client_id") : null
						},
						success: res => {
							console.log(res.data)
							this.$store.dispatch('user/login', res.data);
							uni.navigateBack({
								delta: 1
							});
							// this.$store.dispatch('cart/login');
							// this.$store.dispatch('chat/get');
							// uni.reLaunch({
							// 	url: decodeURIComponent(this.pageroute)
							// });
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			retrieve() {
				this.$wanlshop.to(`retrieve?url=${this.pageroute}`);
			},
			phone() {
				this.$wanlshop.to(`phone?url=${this.pageroute}`);
			},
			register() {
				this.$wanlshop.to(`register?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			}
		}
	};
</script>
<style lang="scss" scoped>
	page,
	body,
	.page {
		min-height: 100vh;
		background: #fff;
	}

	//授权弹框 start
	.auth_wrap {
		position: fixed;
		width: 100%;
		bottom: -120%;
		transition: all 0.35s linear;

		&.show {
			bottom: 0;
			transition: all 0.35s linear;

			.mask {
				display: block;
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			background: rgba(0, 0, 0, 0.5);
			z-index: 98;
			top: 0;
			display: none;
		}

		.auth_content {
			padding: 32rpx 32rpx 72rpx 32rpx;
			position: relative;
			z-index: 99;
			background: #fff;
			border-radius: 16rpx 16rpx 0 0;

			.auth_top {
				position: relative;

				.ptitle {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #999;
				}

				.close {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.auth_ul {
				margin-top: 16rpx;

				.auth_li {
					display: flex;
					align-items: center;
					border-top: solid 1px #f5f5f5;
					padding: 24rpx 0;

					&:last-child {
						border-bottom: solid 1px #f5f5f5;
					}

					.tit {
						width: 140rpx;
						font-size: 30rpx;
					}

					.rit {
						width: calc(100% - 140rpx);

						input {
							font-size: 28rpx;
							height: 72rpx;
							width: 100%;
						}

						image {
							width: 54rpx;
							height: 54rpx;
							border-radius: 50%;
						}

						button {
							width: 100%;
							height: 72rpx;
							background: #fff;
							text-align: left;
							padding: 0;

							&:after {
								border: solid 1px #fff;
							}

							// opacity: 0;
						}
					}
				}
			}

			.confirm_btn {
				width: 420rpx;
				margin: 46rpx auto 0 auto;
				background: #39b54a;
				color: #fff;
				border-radius: 8rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}

	//授权弹框 end

	.header {
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.bottom {
		background: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #39b54a;
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		border: solid 1px #39b54a;
		border-radius: 40rpx;

		image {
			width: 54rpx;
			height: 54rpx;
			margin-right: 16rpx;
		}
	}
</style>

<style>
	@import url("auth.css");

	.auto-login-img {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin: 0 30rpx;
	}

	/* start--去除button的所有默认样式--start */
	.u-reset-button {
		padding: 0;
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		background-color: transparent;
		color: inherit;
		transform: translate(0rpx, 0rpx);
	}

	.u-reset-button.button-hover {
		transform: translate(1upx, 1upx);
	}

	.u-reset-button::after {
		border: none;
	}

	/* end--去除button的所有默认样式--end */
</style>